<template>
	<div>
		<div class="container">
			<div class="header">
				<headerLink></headerLink>
			</div>
			<div class="body">
				<div class="left">
					<div class="left1">
						<basics4></basics4>
					</div>
				
					<div class="left2 ">
                       <abnormal></abnormal>
					</div>
					<div class="left3">
					 <progressLine></progressLine>
					</div>
					<div class="left4">
						<park></park>
					</div>						
				</div>
				<div class="center">
					<div class="center1">
						<chinaMap></chinaMap>
					</div>
					<div class="center2">
						<basicData3></basicData3>
					</div>
				</div>
				<div class="right">
					<div class="right1">
						<warningTabel></warningTabel>
					</div>
					<div class="right2">
						<warningTabel1></warningTabel1>
					</div>
					<div class="right3">
						<warningTabel2></warningTabel2>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import headerLink from './components/header2'
	import basics4 from './components/basics4'
	import basicData3 from './components/basicData3'
	import warningTabel from './components/warningTabel'
	import warningTabel1 from './components/warningTabel1'
	import warningTabel2 from './components/warningTabel2'
	import chinaMap from './components/chinaMap'
	import park from './components/park'
	import progressLine from './components/progress'
	import abnormal from './components/abnormal'

	export default {
		components: {
			headerLink,
			warningTabel,
			warningTabel1,
			warningTabel2,
			chinaMap,
			basicData3,
			park,
			progressLine,
			abnormal,
			basics4
		},
		data() {
			return {

			}
		},
		created() {
			//初次加载进入全屏模式.
			//			setTimeout(() => {
			//				this.launchIntoFullscreen(document.documentElement);
			//			}, 0)
		},

		methods: {
			launchIntoFullscreen(element) {
				if(element.requestFullscreen) {
					element.requestFullscreen();
				} else if(element.mozRequestFullScreen) {
					element.mozRequestFullScreen();
				} else if(element.webkitRequestFullscreen) {
					element.webkitRequestFullscreen();
				} else if(element.msRequestFullscreen) {
					element.msRequestFullscreen();
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		position: absolute;
		display: flex;
		flex-direction: column;
		background: url(/img/bigScreen/16.png)no-repeat;
		background-size: 100% 100%;
		width: 100%;
		::-webkit-scrollbar {
			display: none;
		}
		* {
			box-sizing: border-box;
		}
	}
	
	.header {
		height: 86px;
		margin-bottom: 10px;
	}
	
	.body {
		height: 984px;
		display: flex;
		justify-content: space-between;
		.left {
			width: 27%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.left1 {
				height: 15.3%;
			}
			.left2 {
				height: 15.3%;
			}			
			.left3 {
				height: 31.3%;
			}
			.left4 {
				height: 36%;
			}
		}
		.center {
			width: 45%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.center1 {
				height: 63.3%;
			}
			.center2 {
				height: 36%;
			}
		}
		.right {
			width: 27%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.right1 {
				height: 31.3%;
			}
			.right2 {
				height: 31.3%;
			}
			.right3 {
				height: 36%;
			}
		}
	}
</style>